<#import "/spring.ftl" as spring />
<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Spring Boot RTPT</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default navbar-inverse">
    <div class="container container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="<@spring.url basePath/>/ui">Spring Boot RTPT</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <#list envs as e>
                    <li <#if activeEnv == e> class="active" </#if>><a
                            href="<@spring.url basePath/>/ui?env=${e}&prefix=${prefix!}">${e}</a></li>
                </#list>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <form class="navbar-form navbar-left" method="get" action="<@spring.url basePath/>/ui">
                        <input type="hidden" name="env" value="${activeEnv}"/>
                        <div class="input-group">
                            <input type="text" name="prefix" class="form-control" placeholder="搜索前缀" value="${prefix!}">
                            <div class="input-group-btn">
                                <button type="submit" class="btn btn-default"><i class="fa fa-refresh"></i>过滤</button>
                            </div>
                        </div>
                        <#if editable>
                        <div class="input-group">
                            <button id="addItem" type="button" class="btn btn-success" data-toggle="modal"
                                    data-target="#exampleModalCenter">添加
                            </button>
                        </div>
                        </#if>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <#if notifyClient>
    <div class="alert alert-danger" role="alert">
            您已经更改配置项内容。 <a type="button" class="btn btn-xs btn-success" href="<@spring.url basePath/>/ui/notify">点击通知客户端</a>
    </div>
    </#if>
    <table class="table table-bordered">
        <tr>
            <th>键</th>
            <th>值</th>
            <th>所属环境</th>
            <th>描述</th>
            <th>创建时间</th>
            <#if editable>
                <th>操作</th>
            </#if>
        </tr>
        <#list items as item>
        <tr>
            <td>${item.key}</td>
            <td>${item.value!}</td>
            <td>${item.environment!}</td>
            <td>${item.info!}</td>
            <td>${item.createTime?string('yyyy-MM-dd HH:mm:ss')}</td>
            <#if editable>
                <td>
                    <button class="btn btn-xs btn-danger" data-toggle="modal" data-target="#exampleModalDel"><i
                            class="glyphicon glyphicon-trash"></i></button>
                    <button class="btn btn-xs btn-primary" data-toggle="modal" data-target="#exampleModalCenter"><i
                            class="glyphicon glyphicon-edit"></i></button>
                </td>
            </#if>
        </tr>
        </#list>
    </table>
</div>
<footer class="footer">
    <center>
        <ol class="breadcrumb">
            <li><a href="https://github.com/ihaiker/rtpt" target="_blank">使用指南</a></li>
            <li><a href="https://github.com/ihaiker/rtpt" target="_blank">源码</a></li>
            <li><a href="http://wo.renzhen.la/" target="_blank">个人主页</a></li>
        </ol>
    </center>
</footer>

<div class="modal fade" id="exampleModalDel" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="exampleModalLongTitle">删除配置项</h3>
            </div>
            <div class="modal-body">
                <h5>您确定要删除配置项？</h5>
            </div>
            <div class="modal-footer">
                <a id="delUrl" href="" type="button" class="btn btn-danger">删除</a>
                <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="exampleModalLongTitle">添加配置项</h3>
            </div>
            <div class="modal-body">
                <form id="addForm" method="post" action="<@spring.url basePath/>/ui/add">
                    <div class="form-group">
                        <label class="control-label" for="itemKey">配置键</label>
                        <input type="text" class="form-control" id="itemKey" name="itemKey" placeholder="key">
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="itemValue">配置值</label>
                        <input type="text" class="form-control" id="itemValue" name="itemValue" placeholder="value">
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="itemEnv">所属环境</label>
                        <input type="text" class="form-control" id="itemEnv" name="itemEnv" placeholder="envrioment">
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="itemInfo">值描述</label>
                        <input type="text" class="form-control" id="itemInfo" name="itemInfo" placeholder="info...">
                    </div>
                    <button type="button" class="btn btn-success" onclick="checkForm()">提交</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
<#if editable>
<script type="application/javascript">
    function checkForm() {
        var name = $("#itemKey").val();
        if (name === undefined || name == "") {
            $("#itemName").parent().addClass("has-error");
            return;
        }
        var val = $("#itemValue").val();
        if (val === undefined || val == "") {
            $("#itemValue").parent().addClass("has-error");
            return;
        }
        $("#addForm").submit();
    }

    $(function () {
        $('#exampleModalDel').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var key = button.parent().parent().find("td:eq(0)").html();
            var env = button.parent().parent().find("td:eq(2)").html();

            $("#delUrl").attr("href", "<@spring.url basePath/>/ui/del?itemKey=" + key + "&itemEnv=" + env);

        });
        $('#exampleModalCenter').on('show.bs.modal', function (event) {
            $("#itemKey").parent().removeClass("has-error");
            $("#itemValue").parent().removeClass("has-error");

            var button = $(event.relatedTarget);
            var recipient = button.data('whatever');
            var modal = $(this);
            if (button.attr("id") == "addItem") {
                $("#itemKey").val("");
                $("#itemValue").val("");
                $("#itemEnv").val("");
                $("#itemInfo").val("");
            } else {
                $("#itemKey").val(button.parent().parent().find("td:eq(0)").html());
                $("#itemValue").val(button.parent().parent().find("td:eq(1)").html());
                $("#itemEnv").val(button.parent().parent().find("td:eq(2)").html());
                $("#itemInfo").val(button.parent().parent().find("td:eq(3)").html());
            }
        })
    });
</script>
</#if>
</body>
</html>